<template>
  <div>
    <!-- 黑层 -->
    <div class="Permissiond" :style="{zIndex: zindex,backgroundColor:whitecolor,display:showd ? 'block':'none'}">
        <span :style="{ display:showd ? 'block':'none'}">🔒权限不足</span>
    </div>

    <div class="third">
      <h3>人才招聘</h3>
      <div class="gengduo"  @click="AddNewCompany">更多</div>
      <div class="third_top">
        <div class="top_one" style="margin-left: 20px">岗位名称</div>
        <div class="top_two">所属机构</div>
        <div class="top_three">缺人口</div>
        <div class="top_three">收到简历</div>
        <div class="top_three" style="margin-left: 5px">人事审核</div>
        <div class="top_three" style="margin-left: 5px;">业务审核</div>
      </div>
      <div class="third_body">
        <div class="two_middle" v-for="(item, index) in zzy " :key="index">
          <div class="two_middle_one" style="margin-left: 20px">{{ item.positionName }}</div>
          <div class="two_middle_two" >{{ item.department }}</div>
          <div class="two_middle_three">{{ item.shortageOfPopulation }}</div>
          <div class="two_middle_four">{{ item.receivedResumes }}</div>
          <div class="two_middle_four">{{ item.hrReview }}</div>
          <div class="two_middle_four">{{ item.businessReview }}</div>
        </div>
      </div>
    </div>

    <div class="four">
      <h3>我的费用</h3>
      <div class="four_one">
        <div class="four_one_one">
          <span>发票夹总金额</span>
          <span class="four_one_two">612.62</span>
          <span class="four_one_two">查看当前发票夹</span>
          <span class="four_one_two">添加发票</span>
        </div>
        <div class="four_two">
          <div class="four_one_three">报销流程数</div>
          <div class="four_two_one">95</div>
          <div class="four_two_two">一键发起报表申请</div>
        </div>

      </div>
      <div class="four_three">
        <div class="four_three_one" v-for="(item, index) in zzy1" :key="index">
          <div style="width: 100px;margin-top: 25px;">{{ item.a }}</div>
          <div style="width: 100px;font-size: 14px;margin-top: -25px;">{{ item.b }}</div>
        </div>
      </div>
      <div class="four_five">
        <div class="four_five_one" v-for="(item, index) in zzy3" :key="index">
          <img :src="item.a" alt="" class="four_five_one_one">
          <div class="four_five_one_two">{{ item.b }}</div>
          <div class="four_five_one_three">{{ item.c }}</div>
          <div class="four_five_one_four">{{ item.d }}</div>
        </div>
      </div>
    </div>
    <div class="five">
      <div class="five_zi">
        <h3>共享服务</h3>
      </div>

      <!-- <div class="five_one">
    <div class="five_one_two" v-for="(item, index) in zzy4" :key="index">
      <div class="five_one_one">{{ item.a }}</div>
      <div class="five_one_three">

        <el-button
          class="five_one_but"
          v-for="(rgc, rgcIndex) in item.b"
          :key="rgcIndex"
          @click="index === 0 && rgcIndex === 0 ? handleClick(item, rgc) : null">
          {{ rgc }}
        </el-button>
      </div>
    </div>
  </div> -->

      <div class="five_one">

        <div class="five_one_two" v-for="(item, index) in zzy4" :key="index">
      <div class="five_one_one">{{ item.a }}</div>
      <div class="five_one_three">
        <!-- 给第一个分类的第一个按钮添加点击事件 -->
        <el-button
          class="five_one_but"
          v-for="(rgc, rgcIndex) in item.b"
          :key="rgcIndex"
          @click="handleClick(index, rgcIndex, rgc)">
          {{ rgc }}
        </el-button>
      </div>
    </div>





        <!-- <div class="five_one_two" v-for="(item, index) in zzy4" :key="index">
          <div class="five_one_one">{{ item.a }}</div>
          <div class="five_one_three">
            <el-button class="five_one_but" v-for="(rgc, index) in item.b" :key="index" @click="tiaozhuan" >{{ rgc }}</el-button>

          </div>

        </div> -->
      </div>
    </div>

    <div class="seven">
      <h3>简历中心</h3>
      <div class="seven_sixsix" @click="more">更多>></div>
      <div class="seven_one">
        <div class="seven_one_one">姓名</div>
        <div class="seven_one_one">应聘岗位</div>
        <div class="seven_one_one">人才渠道来源</div>
        <div class="seven_one_one">手机号</div>
        <div class="seven_one_one">工作经验</div>
        <div class="seven_one_one">简历分类</div>
        <div class="seven_one_one">推送时间</div>
      </div>
      <div class="seven_six">
        <div class="seven_two_one" v-for="(item, index) in zzy5" :key="index">
          <div class="seven_two_two">{{ item.name }}</div>
          <div class="seven_two_two">{{ item.positionName }}</div>
          <div class="seven_two_two">{{ item.source }}</div>
          <div class="seven_two_two" style="margin-left: 15px">{{ item.phone }}</div>
          <div class="seven_two_two" style="margin-left: 15px">{{ item.workExperience }}</div>
          <div class="seven_two_two" style="margin-left: 24px;">{{ item.classify }}</div>
          <div class="seven_two_two" style="margin-left: 25px;">{{ item.airTime }}</div>


        </div>
      </div>
    </div>

</div>

</template>
<script>

import { selectsome,SelsomeURC } from '../../api/share'
import Tinymce from "@/components/Tinymce";

const defaultEditForm = {
  id: null,
  name: null,
  introductionThe: null,
  createTime: null,
  updateTime: null,
};
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  isAsc: false,
  orderByField: "create_time",
};
export default {

  components: { Tinymce },
  mounted(){
      this.selsome();
      this.SelectsomeURC();
  },
  methods: {
    handleClick(index, rgcIndex, rgc) {
      // 检查是否是第一个分类的第一个按钮
      if (index === 0 && rgcIndex === 0) {
        // 使用 Vue Router 进行跳转
        this.$router.push('/request');
      }
    },
    // handleClick(){
    //   if (index === 0 && rgcIndex === 0) {
    //     // 使用 Vue Router 进行跳转
    //     this.$router.push('/request');
    // }},
    selsome(){
      selectsome().then(res=>{
        if(res.code == 200){
          this.showd = !this.showd
          this.zzy=res.result;
          console.log(this.zzy);

        }else{
          this.zindex = '1000'
          this.showd = this.showd
        }

      }).catch(err=>{
        console.log(err);
      })
    },
    SelectsomeURC(){
      SelsomeURC().then(res=>{
        console.log(res);
        this.zzy5=res.result;
      })
    },
    AddNewCompany(){
      this.$router.push("/AddNewCompany/AddNewCompany");

    },
    more() {
      this.$router.push("/more/more");

    },
    next() {
        if (this.active++ > 2) this.active = 0;
      },
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
  },

  data() {
    return {
      zindex: "",
      showd:true,
      active: 0,
      input11: '博士后',
      active: 0,
      input10: '张帅扬',
      value: "",
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      total: "",
      tinymceFlag: 1,
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      listData: [], //数据
      list: Object.assign({}, defaultListQuery),





      formInline: {
        region: '现场面试',
        login: '初试',
        sex: '男',
        year: '十年'

      },
      value1: new Date(2016, 9, 10, 18, 40),
      value2: '',

      activeName: 'first',
      zhao: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,

        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',


      data: [
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/bangongyongpin.png',
          b: '办公用品领用'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/zaizhizhengming.png',
          b: '在职证明'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589870850000.png',
          b: '考勤异常调整'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589870864000.png',
          b: '费用报销'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589870879000.png',
          b: '员工名片申请'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589870889000.png',
          b: '收入证明'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589871089000.png',
          b: '员工转正申请'
        },
        {
          a: 'https://enterprise.e-cology.com.cn/cloudstore/release/feb247c080344a139c74dd9d086562fd/resources/file_1589870901000.png',
          b: '用车申请'
        },
      ],
      zsy: [
        {
          a: '我的年假',
          b: '3.25天'
        },
        {
          a: '我的绩效',
          b: '4.60'
        },
        {
          a: '我的报销',
          b: '3800元'
        },
        {
          a: '我的资产',
          b: '12'
        },
        {
          a: '我的会议',
          b: '2'
        },
      ],
      zzy: [

      ],
      zzy1: [
        {
          a: '2000.00',
          b: '已报销总金额'
        },
        {
          a: '1111',
          b: '已报销总金额'
        },
        {
          a: '6666',
          b: '已报销总金额'
        }
      ],
      zzy3: [
        {
          a: require('../../assets/img/user.png'),
          b: '客户接待',
          c: '费用报销申请-2021/11/21',
          d: '37800.00'
        },
        {
          a: require('../../assets/img/expenseaccount.png'),
          b: '差旅报销',
          c: '费用报销申请-2021/11/21',
          d: '3200.00'
        },
      ],
      zzy4: [
        {
          a: '人事相关',
          b: ['注册', '我的考勤', '我的排版', '我的年龄', '我的培训', '我的绩效', '我的工资', '我的奖罚', '我的个税'],
        },
        {
          a: '行政相关',
          b: ['我的资产', '我的会议', '客户接待', '会议室查询', '访客查询', '物料查询', '班车查询', '每日菜单', '停车指南']

        },
        {
          a: '费用相关',
          b: ['我的发票', '我的报销', '我的商旅', '费用标准', '预算查询', '凭证查询', '我的借款', '我的付款', '我的清款']

        }
      ],
      zzy5: [

      ]
    }

  },


}
</script>
<style>
.firstbox {
  width: 800px;
  height: 250px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.first_first {
  width: 180px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  margin-left: 15px;
  margin-top: 20px;
}

.tu {
  width: 45px;
  height: 45px;
  margin-top: 10px;
  flex-shrink: 0;
  margin-top: 15px;
}

.but,
.buta {
  width: 65px;
  height: 30px;
  flex-shrink: 0;
  flex-shrink: 0;
  margin-top: 40px;
  margin-left: -85px;
  font-size: 12px;
  padding: 0;
}

.text {
  width: 85px;
  margin-top: 10px;
  margin-left: 5px;
  flex-shrink: 0;
  font-size: 14px;
}

.first_two {
  width: 447px;
  height: 250px;
  margin-left: 800px;
  margin-top: -250px;
  background-color: rgb(255, 255, 255);
  display: flex;
}

.headportrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
}

.two_zi {
  width: 320px;
  height: 20px;
  margin-top: 20px;
  font-size: 18px;

}

.two_zia {
  color: rgb(0, 98, 246);
}

.two_two {
  width: 300px;
  height: 40px;
  margin-top: 70px;
  margin-left: -310px;
  display: flex;
  font-size: 12px;
}

.two_tu {
  width: 30px;
  height: 30px;
  margin-top: 5px;
}

.two_two_zi {
  margin-top: 10px;
}

.two_two_o {
  width: 450px;
  height: 100px;
  margin-top: 148px;
  margin-left: -450px;
  display: flex;
}

.third {
  width: 800px;
  height: 380px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-left: -10px;
}

.third_top {
  width: 780px;
  height: 50px;
  background-color: rgb(255, 255, 255);
  margin-left: 10px;
  display: flex;
}

.top_one {
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  flex-shrink: 0;
}

.top_two {
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  flex-shrink: 0;

}

.top_three {
  width: 90px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  flex-shrink: 0;
}

.top_four {
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  flex-shrink: 0;
}

.two_middle {
  width: 760px;
  height: 50px;
  display: flex;
  line-height: 50px;
  text-align: center;
  display: flex;
  flex-shrink: 0;
}

.two_middle_one {
  width: 200px;
  height: 40px;
  flex-shrink: 0;

}

.two_middle_two {
  width: 120px;
  height: 40px;
margin-left:px;
  flex-shrink: 0;
}

.two_middle_three {
  width: 80px;
  height: 50px;
  margin-left: 5px;
  text-align: center;
  flex-shrink: 0;

  color: red;
}

.two_middle_four {
  width: 90px;
  height: 50px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 5px;
}

.two_middle_but {
  height: 40px;
  margin-top: 5px;
  border: 1px solid gray;

}

.third_body {
  width: 780px;
  height: 260px;
  margin-left: 10px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;

  /* margin-top: -30px; */
}
.third_body_ {
  width: 780px;
  height: 260px;
  margin-left: 10px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;

}

.four {
  width: 445px;
  height: 380px;
  background-color: rgb(255, 255, 255);
  margin-left: 800px;
  margin-top: -380px;
  display: flex;
  flex-wrap: wrap;
}

h3 {
  margin-left: 20px;
  color: blue;
  flex-direction: 0;
}

.four_one {
  width: 380px;
  height: 50px;
  display: flex;
  margin-top: 60px;
  margin-left: -40px;
  flex-wrap: wrap;
}

.four_one_one {
  width: 380px;
  height: 25px;
  flex-shrink: 0;

}

.four_one_two,
.four_two_one,
.four_two_two {
  font-size: 12px;
  margin-left: 20px;
  color: blue;
}

.four_two {
  width: 380px;
  height: 25px;
  flex-shrink: 0;
}

.four_one_three {
  width: 100px;
  height: 25px;
  flex-shrink: 0;

}

.four_two_one {
  margin-left: 130px;
  margin-top: -20px;
}

.four_two_two {
  margin-left: 242px;
  margin-top: -15px;
}

.four_three {
  width: 330px;
  height: 100px;
  background-color: rgb(255, 255, 255);
  /* margin-top: -120px; */
  margin-left: 60px;
  display: flex;
  flex-shrink: 0;
  justify-content: space-evenly;
}

.four_three_one {
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.four_five {
  width: 360px;
  height: 120px;
  flex-shrink: 0;
  margin-left: 60px;
  display: flex;
  flex-wrap: wrap;
}

.four_five_one {
  width: 360px;
  height: 60px;
  display: flex;
  flex-shrink: 0;

}

.four_five_one_one {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  margin-top: 10px;
}

.four_five_one_two {
  width: 80px;
  height: 20px;
  margin-left: 15px;
  margin-top: 10px;
}

.four_five_one_three {
  font-size: 13px;
  margin-top: 30px;
  margin-left: -80px
}

.four_five_one_four {
  margin-left: 50px;
  margin-top: 20px;
  color: red;
}

.five {
  width: 1255px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  margin-left: -10px;
  margin-top: 10px;
  display: flex;
}

.five_zi {
  width: 100px;
  height: 30px;
  flex-shrink: 0;


}

.five_one {
  width: 1200px;
  height: 230px;
  margin-top: 60px;
  flex-shrink: 0;
  margin-left: -50px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.five_one_one {
  width: 120px;
  height: 50px;
  font-size: 18px;
  margin-left: 130px;
  line-height: 50px;
  flex-shrink: 0;
  /* background-color: bisque; */
}

.five_one_two {
  width: 380px;
  height: 230px;
  flex-shrink: 0;
  margin-left: 10px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.five_one_but {
  height: 40px;
  width: 100px;
  margin-left: 10px;
  margin-top: 10px;
}

.five_one_three {
  width: 380px;
  height: 180px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.seven {
  width: 1255px;
  height: 320px;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  margin-left: -10px;
  display: flex;
  flex-wrap: wrap;
}

.seven_one {
  width: 1100px;
  height: 70px;
  margin-left: 120px;
  display: flex;
  flex-shrink: 0;
}

.seven_one_one {
  width: 120px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  flex-shrink: 0;
  margin-left: 20px;
}

.seven_six {
  width: 1100px;
  height: 200px;
  margin-left: 120px;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  flex-direction: column;
}

.seven_two_one {
  width: 1100px;
  height: 40px;
  display: flex;

  flex-shrink: 0;

}

.seven_two_two {
  width: 120px;
  height: 50px;
  flex-shrink: 0;
  text-align: center;
  line-height: 50px;
  margin-left: 21px;
  margin-top: -20px;
}

.seven_sixsix {
  width: 80px;
  height: 30px;
  flex-shrink: 0;
  margin-left: 1100px;
  margin-top: -50px
}

.hand {
  font-size: 18px;
  font-weight: 600;
  margin-left: 500px;
}

.biao {
  width: 1000px;
  border: 1px solid black;
  margin-left: 60px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.biao_top {
  width: 1000px;
  height: 60px;
  display: flex;
  line-height: 60px;
  font-size: 20px;
  flex-shrink: 0;
  font-weight: 600;
  border: 1px solid black;
}

.biao_two {
  width: 1000px;
  height: 50px;
  border: 1px solid black;
  flex-shrink: 0;
  display: flex;
  /* margin-top: -250px; */
}

.huise {
  width: 180px;
  height: 50px;
  flex-shrink: 0;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid rgb(166, 166, 166);
  background-color: rgb(255, 255, 255);
}

.kuang {
  width: 318px;
  height: 50px;
  flex-shrink: 0;
  background-color: rgb(255, 255, 255);
}

.biao_three {
  width: 1000px;
  height: 50px;
  border: 1px solid black;
  flex-shrink: 0;
  display: flex;
  /* margin-top: -445px; */
}

.shuoming {
  width: 1000px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  display: flex;
}

.shuoming_one {
  width: 180px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  line-height: 300px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.shuoming_two {
  width: 820px;
  height: 300px;
  flex-shrink: 0;
  display: flex;
}


.lost {
  width: 1000px;
  height: 220px;
  background-color: rgb(255, 255, 255);
  display: flex;
  border: 1px solid black;
}

.hui {
  width: 120px;
  height: 220px;
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
  line-height: 220px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.gengduo{
  margin-left: 630px;
  margin-top: 20px;
}
.Permissiond{
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
</style>
